
<style lang="less" scoped>
    .home {
        & {
            position: relative;
            min-width: 1920px * 0.6;
            min-height: 1080px * 0.6;
            height: calc(100vh - 64px);
            overflow: hidden;
            background-color: #ffffff;
            margin: -24px -24px;
        }
        .img1 {
            width: 329px;
            display: block;
            position: absolute;
            left: 256px;
            top: 0;
            transform: translate(0, -0.5px);
        }
        .img2 {
            display: block;
            position: absolute;
            width: 520px;
            top: 368px;
            right: 200px;
        }

        .img3 {
            display: block;
            position: absolute;
            width: 259px;
            left: 0;
            bottom: 0;
        }
        .welcome {
            & {
                position: absolute;
                top: 195px;
                left: 80px;
            }

            .text-wrapper {
                position: relative;
            }

            .text1,
            .text2 {
                display: block;
            }
            .text1 {
                color: #fafafa;
                font-size: 58px;
                letter-spacing: 8px;
                font-weight: 700;
            }

            .text2 {
                font-size: 28px;
                color: #3973c5;
                margin-top: -37px;
            }
        }

        .copyright-info {
            bottom: 13px;
            right: 30px;
            position: absolute;
        }
    }
</style>
<template>
    <div class="home">
        <img class="img1" :src="img1">
        <img class="img2" :src="img2">
        <img class="img3" :src="img3">
        <div class="welcome">
            <div class="text-wrapper">
                <span class="text1">WELCOME</span>
                <span class="text2">欢迎进入资源库管理平台</span>
            </div>
        </div>
        <div class="copyright-info" v-text="copyright"></div>
    </div>
</template>
<script>
    import img1 from './img/img1.png';
    import img2 from './img/img2.png';
    import img3 from "./img/img3.png";
    import config from '@/config';
    export default {
        name: 'Home',
        data() {
            return {
                img1, img2, img3
            }
        },
        computed: {
            copyright: () => config.enCopyright || config.copyright
        },
        created() {

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.doc = document.querySelector('.ant-layout-footer');
                if (vm.doc) vm.doc.style.display = 'none';
            })
        },
        beforeRouteLeave(to, from, next) {
            if (this.doc) this.doc.style.display = 'block';
            next();
        }
    }
</script>